/**
* Description: 依从记录
*
* Created by hrx on 2023/9/18
*/
<template>
  <div class="complianceRecord">
    <div class="content" v-show="infoFlag">
      <!-- 头部搜索栏 -->
      <div class="state" style="width: 100%">
        <div class="title">依从记录</div>
        <div class="left">
          <el-button type="primary" class="add-button" @click="exportRecord">导出记录</el-button>
        </div>
        <el-form :model="form" ref="formRef" label-position="top" inline class="rightForm">
          <el-form-item>
            <el-select
              style="width: 160px; height: 36px"
              v-model="form.data.complianceStatus"
              placeholder="请选择胸牌绑定状态"
              class="right20"
              clearable
            >
              <el-option
                v-for="item in $CONSTANTS.COMPLIANCE_TYPE_LIST"
                :key="item.ID"
                :label="item.TITLE"
                :value="item.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <DeptCascader ref="deptCascaderRef" v-model="form.data.deptIdArrayList"/>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 160px; height: 36px"
              placeholder="请输入人员姓名"
              v-model="form.data.userName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-button" @click="getListData('search')">搜索</el-button>
            <el-button class="clear-button" @click="resetData">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据展示部分 -->
      <div class="tablePage">
        <Table
          ref="tableRef"
          :not-data-img="$CONSTANTS.NOT_DATA_IMG"
          :table-columns="tableTitle"
          :remote-api="getComplianceRecordListApi"
          :autoLoad="false"
          :pageNumberList="[10, 20, 50, 100]"
          ppageFieldName="page"
          pnumberFieldName="limit"
        >
          <template #index="scope">
            {{ scope.index + 1 }}
          </template>
          <template #complianceStatus="scope">
            <span :style="{color: $CONSTANTS.COMPLIANCE_STATUS[scope.row.complianceStatus].COLOR}">
              {{ $CONSTANTS.COMPLIANCE_STATUS[scope.row.complianceStatus].TITLE }}
            </span>
          </template>
          <template #operate="scope">
            <el-button :class="$CONSTANTS.COMPLIANCE_STATUS[scope.row.complianceStatus].TITLE == '未依从' ? 'disabled-btn' : ''"
                       :disabled="$CONSTANTS.COMPLIANCE_STATUS[scope.row.complianceStatus].TITLE == '未依从'" type="primary" class="edit-button"
                       @click="checkDesc(scope.row)">
              执行明细
            </el-button>
          </template>
        </Table>
      </div>
    </div>
    <complianceRecordDesc ref="complianceRecordDescRef" @checkHandHygieneRecordDetail="checkHandHygieneRecordDetail" />
    <div v-if="!infoFlag">
      <handHygieneRecordDetail ref="handHygieneRecordDetailRef" @change="detailsShow" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  type queryComplianceRecordParams,
  type complianceRecordDTO,
  getComplianceRecordListApi,
  exportDataApi
} from "@/api/complianceRecord";
import {nextTick, onMounted, reactive, ref} from "vue";
import {IBaseQueryDataListParams} from "@/api";
import $CONSTANTS from "@/constants/globalConstants"
import {type ITableColumnItem} from "@/components/common/Table.vue"
import {type handHygieneRecordDTO} from "@/api/handHygieneRecord";
import {ElMessage} from "element-plus";
import {download} from "@/utils/download";

const tableRef = ref()
const formRef = ref()
const complianceRecordDescRef = ref()
const handHygieneRecordDetailRef = ref()
const deptCascaderRef = ref()



const form = reactive<IBaseQueryDataListParams<queryComplianceRecordParams>>({
  data: {
    complianceStatus: undefined,
    userName: undefined,
  }
})
const tableTitle: Array<ITableColumnItem> = [
  {label: "序号", prop: "index", width: 80, template: true},
  {label: "记录编号", prop: "complianceRecordCode",width: 180},
  {label: "姓名", prop: "subUserName"},
  {label: "组织架构", prop: "hospitalDeptName", width: 300},
  {label: "触发位置", prop: "triggerLocation"},
  {label: "触发时机", prop: "triggerTypeStr"},
  {label: "依从状态", prop: "complianceStatus", template: true},
  {label: "触发时间", prop: "triggerTime",width: 180},
  {label: "依从时间", prop: "complianceTime",width: 180},
  {label: "操作", prop: "operate", template: true, fixed: "right", width: 120},
]

const infoFlag = ref<boolean>(true)

const getListData = (type: string) => {
  if (type == 'search') {
    tableRef?.value?.refreshData(form);
  } else {
    tableRef?.value?.queryData(form);
  }
}
// 导出记录
const exportRecord = async () => {
  let tableTotal = tableRef.value.getTotal();
  if (tableTotal == 0) {
    ElMessage.error("无依从记录可导出!");
    return;
  }
  let param: IBaseQueryDataListParams<queryComplianceRecordParams> = {
    data: form.data,
    limit: '',
    page: ''
  }
  let res = await exportDataApi(param);
  download(res.data, `手卫生记录`, "xlsx");
  ElMessage.success("导出成功");
}
const resetData = () => {
  form.data = {
    complianceStatus: undefined,
    userName: undefined,
    deptIdArrayList: undefined,
  };
  tableRef.value.refreshData(form);
  deptCascaderRef.value.resetData();
}
const checkDesc = (row: complianceRecordDTO) => {
  complianceRecordDescRef.value.drawer = true;
  nextTick(() => {
    complianceRecordDescRef.value.init(row);
  })
}
const checkHandHygieneRecordDetail = (row: handHygieneRecordDTO) => {
  row.id = row.washHandsRecordId
  complianceRecordDescRef.value.drawer = false;
  infoFlag.value = false;
  nextTick(() => {
    handHygieneRecordDetailRef?.value?.init(row)
  })
}

const detailsShow = () => {
  infoFlag.value = true;
  complianceRecordDescRef.value.drawer = true;
}


onMounted(() => {
  getListData("getData")
})

</script>

<style lang="scss" scoped>
.complianceRecord {
  height: 100%;
  .disabled-btn{
    opacity: 0.6;
  }
}
</style>